.container {
  background: #e9e9e9;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24rpx;
  .top {
    margin-bottom: 24rpx;
  }
  .card {
    width: 100%;
    background: #ffffff;
    border-radius: 32rpx;
    // height: 100rpx;
    box-sizing: border-box;
    padding: 5rpx;
    > view {
      background: linear-gradient(
        rgba(129, 202, 197, 0.25),
        rgba(129, 202, 197, 0.1),
        #ffffff
      );
      padding: 0 24rpx;
      border-radius: 32rpx;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 14rpx;
        border-bottom: 1px solid #e9e9e9;
        > view {
          font-size: 24rpx;
          color: #999999;

          > view {
            margin-bottom: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
          }
        }
        > button {
          margin: 0;
          font-size: 28rpx;
          padding: 13rpx 20rpx !important;
          height: fit-content;
          line-height: 1.25;
          background: #73F0EA;
          color: #ffffff;
          display: flex;
          align-items: center;
          gap: 10rpx;
          image {
            width: 22rpx;
            height: 22rpx;
            display: block;
          }
          &::after {
            border: 0;
          }
        }
      }
      .main {
        padding: 32rpx 14rpx 0;
        .list {
          margin-top: 20rpx;
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          grid-gap: 32rpx 0;
          > view {
            grid-column: span var(--span);
            display: flex;
            flex-direction: column;
            gap: 4rpx;
            .label {
              font-size: 22rpx;
              color: #666666;
            }
            .num {
              font-size: 32rpx;
              font-weight: bold;
            }
            .change {
              font-size: 20rpx;
              &.down {
                color: #47cc88;
              }
              &.up {
                color: #f37364;
              }
              text {
                margin-left: 5rpx;
                color: #999999;
              }
            }
          }
          &.listA {
            > view {
              border-left: 1px solid #e9e9e9;
              padding-left: 34rpx;
            }
            &.memberA {
              > view:first-child,
              > view:nth-child(3) {
                border: 0;
                padding-left: 0;
              }
            }
            &:not(.memberA) {
              > view:first-child,
              > view:nth-child(4n) {
                border: 0;
                padding-left: 0;
              }
            }
          }
          &.listB {
            background: #e9e9e9;
            padding: 20rpx 0;
            margin: 32rpx -14rpx 0;
            padding-left: 24rpx;
            border-radius: 32rpx;
          }
        }
        & + .main {
          padding-bottom: 19rpx;
        }
      }
      .lTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;

        > image {
          width: 25rpx;
          height: 25rxp;
        }
        > view {
          display: flex;
          align-items: center;
          gap: 10rpx;
          image {
            width: 35rpx;
            height: 35rpx;
            display: block;
          }
        }
      }
    }
  }
  .contrast {
    .title {
      display: grid !important;
      grid-template-columns: repeat(7, 1fr);
      >view{
        grid-column: span 2 !important;
        font-size: 26rpx !important;
        color: #333333 !important;
        font-weight: bold;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 10rpx;
        image {
          width: 15rpx;
          height: 7rpx;
          display: block;
        }
        &:first-child{
          image {
            width: 25rpx;
            height: 25rpx;
            display: block;
          }
        }
        &:nth-child(2){
          grid-column: span 3 !important;
        }
      }
    }
    .main {
      > view {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: center;
        font-size: 26rpx;
        margin-bottom: 32rpx;
        .label{
          font-weight: bold;
        }
        .left{
          display: flex;
          align-items: center;
          gap: 20rpx;
          >view{
            display: flex;
            align-items: center;
            color: #F37364;
            font-weight: bold;
            font-size: 24rpx;
            gap: 4rpx;
            &.down{
              color: #47CC88;
            }
          }
        }
        > view {
          grid-column: span 2;
          width: 100%;
          &:nth-child(2) {
            grid-column: span 3;
          }
          image {
            width: 13.5rpx;
            height: 15.5rpx;
            display: block;
          }
        }
      }
    }
  }
}
.pMain {
  min-height: 500rpx !important;
  padding-bottom: 100rpx;
  .date-list {
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14rpx;
    > text {
      font-weight: bold;
      flex-shrink: 0;
      font-size: 28rpx;
      margin-right: 10rpx;
    }
    .item {
      padding: 16rpx;
      color: #333333;
      flex: 0 0 calc(25% - 14rpx);
      box-sizing: border-box;
      background: #f6f6f6;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      border-radius: 16rpx;
      border: 2rpx solid #f6f6f6;
      view {
        font-size: 20rpx;
      }
      &.active {
        border-color: #73F0EA;
        color: #73F0EA;
        background-color: #f2faf9;
      }
    }
  }
  .custom {
    padding: 0 40rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    gap: 24rpx;
    align-items: center;
    font-size: 28rpx;
    text {
      font-weight: bold;
      flex-shrink: 0;
    }
    .line {
      width: 100%;
      background: #000;
      height: 4rpx;
    }
    > .date {
      flex-shrink: 0;
      border: 2rpx solid #e9e9e9;
      width: 244rpx;
      height: 82rpx;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #b6b6b6;
      &.active {
        color: #333333;
      }
    }
  }
  .btn {
    box-sizing: border-box;
    padding: 20rpx;
    position: absolute;
    width: 100%;
    bottom: calc(env(safe-area-inset-bottom) / 2);
  }
}

.date-p {
  height: 800rpx;
  .p-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
